<template>
  <div>
    <div class="text-center">
      <v-btn class="mx-2" fab dark small color="primary">
        <v-icon dark>
          mdi-minus
        </v-icon>
      </v-btn>

      <v-btn class="mx-2" fab dark small color="pink">
        <v-icon dark>
          mdi-heart
        </v-icon>
      </v-btn>

      <v-btn class="mx-2" fab dark color="indigo">
        <v-icon dark>
          mdi-plus
        </v-icon>
      </v-btn>

      <v-btn class="mx-2" fab dark color="teal">
        <v-icon dark>
          mdi-format-list-bulleted-square
        </v-icon>
      </v-btn>

      <v-btn class="mx-2" fab dark large color="cyan">
        <v-icon dark>
          mdi-pencil
        </v-icon>
      </v-btn>

      <v-btn class="mx-2" fab dark large color="purple">
        <v-icon dark>
          mdi-android
        </v-icon>
      </v-btn>

      <el-row>
        <el-button>默认按钮</el-button>
        <el-button type="primary">
          主要按钮
        </el-button>
        <el-button type="success">
          成功按钮
        </el-button>
        <el-button type="info">
          信息按钮
        </el-button>
        <el-button type="warning">
          警告按钮
        </el-button>
        <el-button type="danger">
          危险按钮
        </el-button>
      </el-row>
      <hr>
    </div>
    <h1>{{ val }}</h1>
  </div>
</template>
<script>
export default {
  data: () => ({
    val: 2
  })
}
</script>
<style scoped>
h1{
    border: 1px solid red;
}
</style>
